<template>
	<view class="warp">
		<!-- 顶部搜索 开始 -->
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead searchTip='' goback='gobackF' title='股票开户' background='#EE515A' inputColorStyle="color:#333333"></searchHead>
		<!-- 顶部搜索 结束 -->
		<view class="content flex flex-ver flex-ac flex-f1">
			<view class="img">
				<image src="/static/imgs/account/headIng.png" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="main flex flex-ver flex-ac flex-f1">
				<view class="login zc">
					<text @click="toRegister()">立即开户</text>
				</view>
				<view class="title">
					<text class="color_666666">已有其他证券账户，新增汇丰证券账户</text>
				</view>
				<view class="login zc border">
					<text @click="toRegister()">一人多户</text>
				</view>
				<view class="flex" style="margin-top: 27rpx;justify-content: end;width: 100%;">
					<view class="iconBox flex flex-pac">
						<view class="icon" v-if="chick" @click="chick = !chick"><image src="/static/imgs/account/t.png" mode="widthFix"></image></view>
						<view class="icon" v-if="!chick" @click="chick = !chick"><image src="/static/imgs/account/f.png" mode="widthFix"></image></view>
					</view>
					<text class="color_999999 flex flex-ac" style="font-size: 26rpx;height: 44rpx;">
						我已阅读并同意签署
						<text class="color_EE4343"><text @click="toXieyi(1)">《隐私条款》</text><text @click="toXieyi(9)">《版权声明》</text></text>
					</text>
				</view>
				<view class="color_E23232 "><text class="tips">开户前请准备好</text></view>
				<view class="footer flex">
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/idCard.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">二代身份证</text>
					</view>
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/bank.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">本人银行卡</text>
					</view>
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/wifi.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">WIFI或4G环境</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components: {
			searchHead,
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				chick:false, //是否勾选已阅读协议
			}
		},
		methods: {
			toXieyi: function(id) {
				console.log("/pages/public/arcticle/detail?type=1&id="+id)
				uni.navigateTo({
					url: '/pages/public/arcticle/detail?type=1&id='+id
				})
			},
			toRegister(){
				uni.navigateTo({
					url: '/pages/public/login/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.content {
		height: 100%;
	}
	.title {
		font-size: 26rpx;
		margin-top: 58rpx;
		font-weight: 400;
		margin-bottom: 40rpx;
	}
	.img {
		width: 100%;
	}
	.login {
		background-color: #EE4343;
		width: 100%;
		border-radius: 4rpx;
		text-align: center;
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 92rpx;
			color: #FFFFFF;
	
		}
	}
	.iconBox {
		margin-right: 15rpx;
		width: 44rpx;
		.icon {
			display: block;
			width: 100%;
			
		}
	}
	.border {
		background-color: #fff;
		border: 2rpx solid #EE4343;
		border-radius: 4rpx;
		text {
			color: #EE4343;
		}
	}
	.main {
		margin-top: -30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		height: 100%;
		width: 100%;
		background-color: #fff;
		padding: 0 50rpx;
		padding-top: 86rpx;
		margin-bottom: 25rpx;
	}
	.tips {
		display: block;
		margin-top: 140rpx;
		margin-bottom: 80rpx;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			width: 56rpx;
			height: 2rpx;
			background: #E4000D;
			top: 0;bottom: 0;
			left: -72rpx;
			margin: auto;
		}
		&::before {
			position: absolute;
			content: '';
			width: 56rpx;
			height: 2rpx;
			background: #E4000D;
			top: 0;bottom: 0;
			right: -72rpx;
			margin: auto;
		}
	}
	.footer {
		width: 100%;
		justify-content: space-between !important;
		.img {
			width: 55rpx;
			margin-bottom: 15rpx;
		}
	}
	
	
</style>
